<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <el-tabs v-model="activeName">
          <el-tab-pane label="角色管理" name="first" class="el-tab-item">
            <el-row>
              <el-button type="primary" @click="addRole"><span class="jiahao">+</span> 新增角色</el-button>
            </el-row>
            <el-row>
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="序号" width="180">
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="角色名" width="180" />
                <el-table-column prop="description" label="描述" />
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="200"
                >
                  <template slot-scope="scope">
                    <!-- {{ scope }} -->
                    <el-button type="info" size="mini" style="margin:0 10px 0 0;" @click="editRole(scope.row.id)">编辑</el-button>
                    <el-button type="danger" size="mini" style="margin:0" @click="delRole(scope.row.id)">删除 </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
            <el-row type="flex" justify="center" style="margin-top:50px;">
              <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :page-sizes="[3, 4, 5, 6]"
                :page-size="settingPage.pagesize"
                :current-page="settingPage.page"
                @size-change="sizeChange"
                @current-change="currentChange"
              />
            </el-row>
          </el-tab-pane>
          <!-- 公司信息 -->
          <el-tab-pane
            label="公司信息"
            name="second"
            class="el-tab-item"
          >
            <el-form style="margin-top:50px">
              <el-form-item label="企业名称" label-width="200px">
                <el-input v-model="company.name" disabled style="width:500px" />
              </el-form-item>
              <el-form-item label="公司地址" label-width="200px">
                <el-input v-model="company.companyAddress" disabled style="width:500px" />
              </el-form-item>
              <el-form-item label="公司电话" label-width="200px">
                <el-input v-model="company.companyPhone" disabled style="width:500px" />
              </el-form-item>
              <el-form-item label="邮箱" label-width="200px">
                <el-input v-model="company.mailbox" disabled style="width:500px" />
              </el-form-item>
              <el-form-item label="备注" label-width="200px">
                <el-input v-model="company.remarks" disabled style="width:500px" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <!-- 增加角色组件 -->
      <addRole ref="addRole" :dialog-visible.sync="dialogVisible" :role-detail="roleDetail" @loadPage="loadPage" />
    </div>
  </div>
</template>

<script>
import addRole from './components/addRole'
import { getRole, delRole, getRoleDetail, getCompanyInfo } from '@/api/setting'
import { mapGetters } from 'vuex'
export default {
  components: {
    addRole
  },
  data() {
    return {
      activeName: 'first',
      tableData: [],
      settingPage: {
        page: 1,
        pagesize: 3
      },
      total: 0,
      dialogVisible: false,
      roleDetail: {},
      company: {}
    }
  },
  computed: {
    ...mapGetters(['companyId'])
  },
  created() {
    this.getRole()
    this.getCompanyInfo()
  },
  methods: {
    async getRole() {
      const { total, rows } = await getRole(this.settingPage)
      console.log(total, rows)
      this.tableData = rows
      this.total = total
    },
    sizeChange(sizePage) {
      this.settingPage.pagesize = sizePage
      this.getRole()
    },
    currentChange(currentPage) {
      this.settingPage.page = currentPage
      this.getRole()
    },
    // 点击增加角色显示dialog
    addRole() {
      this.dialogVisible = true
    },
    // 重新加载页面
    loadPage() {
      this.getRole()
    },
    // 删除角色
    delRole(id) {
      this.$confirm('确定删除角色？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delRole(id).then(res => {
          this.getRole()
          this.$message.success('删除成功')
        })
      }).catch(error => {
        console.log(error)
      })
    },
    // 编辑角色
    async editRole(id) {
      this.roleDetail = await getRoleDetail(id)
      await this.$refs.addRole.getRoleDetail(id)
      this.dialogVisible = true
    },
    // 获取公司信息
    async getCompanyInfo() {
      this.company = await getCompanyInfo(this.companyId)
    }
  }
}
</script>

<style lnag="scss"  scoped>
/deep/ .el-tabs__item {
  font-size: 24px;
  padding: 0 30px;
}
/deep/ .el-button {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 14px;
}
.jiahao{
  font-size: 20px;
}
</style>
